<template lang="pug">
div.sorts-detail(v-if="model")
  app-header(fixed,back,:title="model.title || '产品详细'",v-if="!$helper.isWechat")
  .main-wrapper(ref="mainWrapper",:style="{top: $helper.isWechat ? '0' : '0.84rem'}")
    div.wrapper-content(:style="{'padding-bottom': parseInt(_.get(model, 'header_height', 3)) - 2 + 'rem'}")
      //- 滚动图片
      mt-swipe(:auto="4000",v-if="(model.images || []).length",:style="{'height': _.get(model, 'header_height', 4) + 'rem'}")
        mt-swipe-item(v-for="(banner,index) in model.images",:key="index")
          img(:src="banner.image")
      img.header-img(:src="model.icon",:style="{'max-height': _.get(model, 'header_height', 4) + 'rem'}",v-else)
      //- 信息
      div.info
        h4 {{model.title}}
        strong &yen;{{model.price}}
        section
          span.left 销量: {{model.sales}}
          span.right 好评: {{model.likes}}
      //- 详细
      div.detail
        header 
          span 商品详情
        div(v-html="model.intro")
      //- 最新评论
      div.detail
        header 
          span 最新评论
      div.cover(v-show="scrolling")
  //- 购买按钮
  div.pay-btn
    button(@click="buyProductHandler(model)") 立即购买
  app-buy-option(:model="currentProduct",:activityId="parseInt(activityId)",@close="buyOptionCloseHandler")
</template>

<script>
import { Toast, Button, Swipe, SwipeItem } from 'mint-ui'
import BScroll from 'better-scroll'
import Header from 'components/Header'
import BuyOption from 'components/BuyOption'
export default {
  components: {
    'mt-button': Button,
    'app-header': Header,
    'app-buy-option': BuyOption,
    'mt-swipe': Swipe,
    'mt-swipe-item': SwipeItem
  },
  data () {
    return {
      mainScroll: null,
      scrolling: false,
      currentProduct: null,
      activityId: 0, // 获得ID
      model: {}
    }
  },
  async mounted () {
    await this.loadData()
  },
  methods: {
    async loadData () {
      let toast = Toast('正在加载..')
      this.activityId = this.$route.params['aId']
      let result = await this.$rpc.invoke('product_detail', [this.$route.params['id']]).complete()
      if (result.code) {
        Toast(result.message)
        this.$router.push({ name: 'home:index' })
        return
      }
      this.model = result.data
      this._initScroll()
      toast.close()
    },
    buyProductHandler (model) {
      this.currentProduct = model
    },
    buyOptionCloseHandler () {
      this.currentProduct = null
    },
    _initScroll () {
      if (!this.mainScroll) {
        this.$nextTick(() => {
          this.mainScroll = new BScroll(this.$refs.mainWrapper, {
            probeType: 1,
            click: true,
            scrollbar: {
              fade: true,
              interactive: false
            }
          })
          this.mainScroll.on('scrollStart', () => {
            this.scrolling = true
          })
          this.mainScroll.on('scrollEnd', () => {
            this.scrolling = false
          })
        })
      } else {
        this.$nextTick(() => {
          this.mainScroll.refresh()
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.mint-swipe
  height: 4rem
  background: #efefef
  img
    width: 100%
    height: auto
.main-wrapper
  position: absolute
  background: #ececec
  bottom: 1.1rem
  left: 0
  right: 0
  overflow: hidden
  .wrapper-content
    padding-bottom: 5rem
.header-img
  width: 100%
  height: auto
  max-height: 4rem
.info
  padding: .2rem
  box-sizing: border-box
  float: left
  width: 100%
  background: #fff
  h4
    font-weight: normal
    line-height: .8rem
    font-size: .4rem
    width: 100%
    float: left
  strong
    color: red
    font-weight: normal
    font-size: .6rem
    line-height: .9rem
    clear: both
    float: left
  section
    width: 100%
    clear: both
    float: left
    color: #666
    font-size: .3rem
    line-height: .6rem
  span.left
    float: left
    padding-left: .2rem
  span.right
    float: right
    padding-right: .2rem
.detail
  width: 100%
  float: left
  margin-top: .3rem
  background: #fff
  padding: .3rem
  box-sizing: border-box
  header
    width: 100%
    font-size: .4rem
    line-height: 1rem
    span
      border-left: .1rem solid #ff7200
      padding-left: .2rem
.pay-btn
  position: absolute
  bottom: 0
  left: 0
  right: 0
  height: 1.1rem
  text-align: center
  background: #fc6768
  button
    border: none
    background: none
    font-size: .5rem
    color: #fff
    line-height: 1.1rem
    padding: 0 1.5rem
    outline: none
    cursor: pointer
</style>
